<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/14
  Time: 17:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/car.css">
<script src="../js/jquery-3.1.1.min.js"></script>
<script src="scripts/car.js"></script>
<style>
    #notice {
        height: 50px;
        font-size: 40px;
        text-align: center;
        letter-spacing: 10px;
        margin-top: 30px;
        display: none;
    }

    #notice a {
        color: black;
        text-decoration: none;
    }

    #notice a:hover {
        color: skyblue;
    }

    .img {
        width: 100px;
        height: 100px;
    }
</style>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>易买网 - 首页</title>
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
    <script type="text/javascript" src="scripts/function.js"></script>
</head>
<body>
<div id="header" class="wrap">
    <div id="logo"><img src="images/logo.gif"/></div>
    <div class="help"><a href="#" class="shopping">购物车</a><a href="../guestbook.jsp">留言</a><a href='LogOutServlet'>点击注销</a></div>
    <div class="navbar">
        <ul class="clearfix">
            <li class="current"><a href="#">首页</a></li>
            <li><a href="#">图书</a></li>
            <li><a href="#">百货</a></li>
            <li><a href="#">品牌</a></li>
            <li><a href="#">促销</a></li>
        </ul>
    </div>
</div>
<div id="childNav">
    <div class="wrap">
        <ul class="clearfix">
            <li class="first"><a href="#">音乐</a></li>
            <li><a href="#">影视</a></li>
            <li><a href="#">少儿</a></li>
            <li><a href="#">动漫</a></li>
            <li><a href="#">小说</a></li>
            <li><a href="#">外语</a></li>
            <li><a href="#">数码相机</a></li>
            <li><a href="#">笔记本</a></li>
            <li><a href="#">羽绒服</a></li>
            <li><a href="#">秋冬靴</a></li>
            <li><a href="#">运动鞋</a></li>
            <li><a href="#">美容护肤</a></li>
            <li><a href="#">家纺用品</a></li>
            <li><a href="#">婴幼奶粉</a></li>
            <li><a href="#">饰品</a></li>
            <li class="last"><a href="#">Investor Relations</a></li>
        </ul>
    </div>
</div>
<div id="position" class="wrap">
    您现在的位置：<a href="../index.html">易买网</a> &gt; 购物车
</div>
<div class="c-container">
    <div class="w">
        <div class="cart-filter-bar">
            <em>全部商品</em>
        </div>
        <!-- 购物车主要核心区域 -->
        <div class="cart-warp">
            <!-- 头部全选模块 -->
            <div class="cart-thead">
                <div class="t-checkbox">
                    <input type="checkbox" name="" class="checkall"> 全选
                </div>
                <div class="t-goods">商品</div>
                <div class="t-price">单价</div>
                <div class="t-num">数量</div>
                <div class="t-sum">小计</div>
                <div class="t-action">操作</div>
            </div>
            <!-- 商品详细模块 -->
            <form action="/shopping/OrderServlet" method="get" id="order">
                <div id="notice">购物车中没有商品，<a href="/shopping/TodaySpecialsServlet">去添加</a></div>
                <div class="cart-item-list">
                    <c:forEach items="${sessionScope.productCarList}" var="p">
                        <div class="cart-item " id="${p.productid}">
                            <div class="p-checkbox ">
                                <input type="checkbox" class="j-checkbox">
                            </div>
                            <div class="p-goods">
                                <div class="p-img">
                                    <c:forEach items="${sessionScope.commodityList}" var="c">
                                        <c:if test="${p.productid==c.commodity_id}">
                                            <img src="images/product/${c.pic}" alt="" class="img">
                                        </c:if>
                                    </c:forEach>
                                </div>
                                <div class="p-msg">${p.productname}</div>
                            </div>
                            <div class="p-price"><span>￥</span><span class="productprice">${p.price}</span></div>
                            <div class="p-num">
                                <div class="quantity-form">
                                    <a href="javascript:;" class="decrement">-</a>
                                    <input type="text" class="itxt" value="${p.num}">
                                    <a href="javascript:;" class="increment">+</a>
                                </div>
                            </div>
                            <div class="p-sum"><span>￥</span><span class="price">${p.price*p.num}</span></div>
                            <div class="p-action"><a href="javascript:;" id="remove">删除</a></div>
                        </div>
                    </c:forEach>
                </div>
                <!-- 结算模块 -->
                <div class="cart-floatbar">
                    <div class="select-all">
                        <input type="checkbox" name="" id="" class="checkall">全选
                    </div>
                    <div class="operation">
                        <a href="javascript:;" class="clear-all">清空购物车</a>
                    </div>
                    <div class="toolbar-right">
                        <div class="amount-sum">已经选<em>0</em>件商品</div>
                        <div class="price-sum">总价： <em>￥</em><em>0.00</em></div>
                        <div class="btn-area"><input id="submit" type='submit' value="去结算"/></div>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>
<div id="footer">
    Copyright &copy; 2010 北大青鸟 All Rights Reserved. 京ICP证1000001号
</div>
</body>
<script>
    $(function () {
        //手动修改购物车中商品为零的提示信息
        $('.quantity-form .itxt').on('blur', function () {
            if ($(this).val() < 1) {
                alert("商品数量应至少为1")
                $(this).val(1);
                $(this).change();
            }
        })

        //若购物车为空显示去添加
        function isCarNull() {
            if ($('.j-checkbox').length === 0) {
                $('#notice').css('display', 'block');
                $('.cart-floatbar').css('display', 'none');
                $('.cart-thead').css('display', 'none');
                $('.cart-filter-bar').css('display', 'none');
            } else {
                $('#notice').css('display', 'none')
                $('.cart-thead').css('display', 'block');
                $('.cart-floatbar').css('display', 'block');
                $('.cart-filter-bar').css('display', 'block');
            }
        }

        isCarNull();
        //每行的删除链接
        $(".p-action #remove").on('click', function () {
            $.ajax({
                url: "/shopping/DeleteProductCarServlet",
                type: "get",
                data: {
                    productid: $(this).parents(".cart-item").attr('id')
                },
                success: function (data) {
                    isCarNull();
                }
            })

        })
        //清空购物车
        $('.clear-all').on("click", function () {
            isCarNull();
            $.ajax({
                url: "/shopping/DeleteProductCarServlet",
                type: "post",
                data: {},
                success: function (data) {

                }
            })
        })
        //手动修改购物车中商品数量
        $('.quantity-form .itxt').on('blur', function () {
            $(this).parents('.cart-item').children().find("#autonum").val($(this).val());
            $.ajax({
                url: "/shopping/UpdateProductCarServlet",
                type: "post",
                data: {
                    num: $(this).val(),
                    productid: $(this).parents(".cart-item").attr('id')
                },
                success: function (data) {
                }
            })
        })
        //增加减少按钮更改购物车中商品数量
        $('.cart-item .decrement,.cart-item .increment').on('click', function () {
            $(this).parents('.cart-item').children().find("#autonum").val($(this).siblings('.itxt').val())
            $.ajax({
                url: "/shopping/UpdateProductCarServlet",
                type: "post",
                data: {
                    num: $(this).siblings('.itxt').val(),
                    productid: $(this).parents(".cart-item").attr('id')
                },
                success: function (data) {
                }
            })
        })
        //复选框选中时，动态生成该商品的信息
        $('.cart-item').on('change', '.j-checkbox', function () {
            var productID = '<input id="autoproductid" type="hidden" name="productid" value="">'
            var num = '<input id="autonum" type="hidden" name="num" value="1">'
            var price = '<input id="autoprice" type="hidden" name="price" value="">'
            var id = $(this).parents('.cart-item').attr('id');
            var getnum = $(this).parents('.cart-item').find(('.itxt')).val();
            var getprice = $(this).parents('.cart-item').find($('.productprice')).text();
            if ($(this).prop('checked') === true) {
                $(this).parent().append(productID)
                $(this).parent().append(num)
                $(this).parent().append(price)
                $(this).parent($('.j-checkbox')).children().eq(1).val(id)
                $(this).parent($('.j-checkbox')).children().eq(2).val(getnum)
                $(this).parent($('.j-checkbox')).children().eq(3).val(getprice)
            } else if ($(this).prop('checked') === false) {
                $(this).siblings().remove();
            }
        })

        $('#submit').click(function () {
            if ($('.cart-item .j-checkbox:checked').length < 1) {
                alert("请选择商品后再结算")
                return false;
            } else return true;
        })
    })
</script>
</html>

